import React, { useState } from 'react';
import { Card, Table, Button, Icon } from 'antd';
import Pagination from '@/components/Pagination';
import moment from 'moment';
import styles from './index.less';

const ModalTable = ({ title, taskId, params, tableColumns, shouldHide = false, hasExpand, type, loadData }) => {
    const [query, setQuery] = useState({
        ...params,
        taskId,
        pageNo: 1,
        pageSize: 10
    });
    const firstRef = React.useRef(false);
    const [expand, setExpand] = useState(!hasExpand);
    const [loading, taskData, taskTotal, isError] = loadData(query); // 获取任务管理列表
    // 分页操作
    const handlePaginationChange = _pagination => {
        const { current, ...rest } = _pagination;
        setQuery({
            ...query,
            ...rest,
            pageNo: current
        });
    };

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            width: 50,
            render: (text, record, index) => `${(query.pageNo - 1) * query.pageSize + index + 1}`
        },
        {
            title: '任务编号',
            dataIndex: 'taskNo',
            width: 120
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            render: text => (
                <div
                    style={{
                        width: '100%',
                        minWidth: 100,
                        position: 'relative'
                    }}
                >
                    <span
                        style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            transform: 'translateY(-50%)',
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis'
                        }}
                        title={text}
                    >
                        {text}
                    </span>
                </div>
            )
        },
        {
            title: '执行人',
            dataIndex: 'executor',
            width: 100
        },
        {
            title: '部门',
            dataIndex: 'executorDepartmentName',
            width: 120,
            render: text => (
                <div
                    style={{
                        width: '100%',
                        position: 'relative'
                    }}
                >
                    <span
                        style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            top: 0,
                            transform: 'translateY(-50%)',
                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            textOverflow: 'ellipsis'
                        }}
                        title={text}
                    >
                        {text}
                    </span>
                </div>
            )
        },
        {
            title: '开始时间',
            dataIndex: 'planStartTime',
            width: 120,
            render: text => (text ? moment(text).format('MM-DD HH:mm') : '')
        },
        {
            title: '截止时间',
            dataIndex: 'planEndTime',
            width: 120,
            render: text => (text ? moment(text).format('MM-DD HH:mm') : '')
        }
    ];

    const getColumns = () => {
        if (tableColumns) {
            return tableColumns;
        }
        switch (type) {
            case 'cancel':
                return columns.slice(0, 5);
            case 'finish':
            case 'doing':
                columns[3].dataIndex = 'taskExecutor';
                columns[4].dataIndex = 'departmentName';
                return columns;
            default:
                return columns;
        }
    };

    const getY = () => (expand ? 270 : 54);

    const handleExpand = () => {
        setExpand(!expand);
    };

    React.useEffect(() => {
        if (firstRef.current) {
            setQuery({
                ...query,
                ...params
            });
        }
        firstRef.current = true;
    }, [params]);

    return (
        <>
            {!isError && (!shouldHide || taskTotal > 0) && (
                <Card bordered={false} className={styles.delayedForm}>
                    <div style={{ paddingBottom: 10 }}>{title}</div>
                    <Table
                        rowKey="id"
                        bordered={false}
                        columns={getColumns()}
                        loading={loading}
                        dataSource={taskData}
                        pagination={false}
                        scroll={{ y: getY() }}
                    />
                    {((hasExpand && expand) || !hasExpand) && (
                        <Pagination
                            total={taskTotal}
                            current={Number(query.pageNo)}
                            pageSize={Number(query.pageSize)}
                            onChange={handlePaginationChange}
                            loading={loading}
                        />
                    )}

                    {hasExpand && (
                        <div className={styles.moreButton}>
                            <Button type="link" onClick={handleExpand}>
                                {expand ? '收起' : '查看更多'}
                                {expand ? <Icon type="up" /> : <Icon type="down" />}
                            </Button>
                        </div>
                    )}
                </Card>
            )}{' '}
        </>
    );
};

export default ModalTable;
